<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>我的申请</span>
      </div>
    </template>

    <div class="table-data" v-loading="loading">
      <el-table
        :data="tableData"
        stripe
        borderresizable
        highlight-hover-row
        show-overflow
        keep-source
        scrollbar-always-on
      >
        <el-table-column
          v-for="(tableItem, tableIndex) in tableColumns" :key="tableIndex"
          :prop="tableItem.field"
          :label="tableItem.label"
          :min-width="tableItem.minWidth"
          :formatter="tableItem.formatter"
          show-overflow-tooltip
        >
          <template #default="scope" v-if="tableItem.slot">
            <slot :name="tableItem.slot" v-bind="scope">
              <el-image class="table-item-img" :src="reFileResult(scope.row.picture)" fit="cover" v-if="tableItem.slot == 'imgView'">
                <template #error>
                  <div class="image-slot">
                    <el-image style="width: 200px;" src="/images/course_default.png" fit="cover" />
                  </div>
                </template>
              </el-image>
              <video
                v-if="tableItem.slot == 'videoView' && scope.row.video != ''"
                ref="videoRef"
                :src="scope.row.microVideo ? reFileResult(scope.row.microVideo) : ''"
                :width="313"
                :height="170"
                muted
                controls
                loop
                showPlay
                controlslist="nodownload"
              ></video>
              <span v-if="tableItem.slot == 'videoView' && scope.row.video == ''"></span>
            </slot>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          field="opera"
          label="操作"
          min-width="120"
        >
          <template #default="{ row }">
            <el-button
              type="warning"
              link
              @click="fundDetail(row)"
            >查看</el-button>
            <el-button
              type="success"
              link
              @click="fundEdit(row)"
              v-if="row.checkStatus == 0"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-page">
        <el-pagination background layout="prev, pager, next" :total="dataTotal" :page-size="pageSize" :current-page="currentPage" @current-change="currentChange" />
      </div>
    </div>
  </el-card>
</template>

<script>
export default { name: 'backendLearnfund' }
</script>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue';
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Search, Filter } from '@element-plus/icons-vue'
import { http } from '@/utils/http/index';
import { dateFormatter, checkStatusFormatter, reFileResult } from "@/utils/backend.js"
import { useAuthStore } from '@/stores/modules/auth.js';
import { ContentTypeEnum } from '@/enums/httpEnum';

/* 路由 */
const route = useRouter()

onMounted(() => {
  onSubmit()
})

const fillType = computed(() => {
  if (route.currentRoute.value.path == '/backend/learn-fund-apply') return 0
  if (route.currentRoute.value.path == '/backend/publicize-collectiveness-apply') return 1
  if (route.currentRoute.value.path == '/backend/publicize-personal-apply') return 2
  if (route.currentRoute.value.path == '/backend/publicize-report-apply') return 3
  if (route.currentRoute.value.path == '/backend/publicize-video-apply') return 3
})

/* 用户信息 */
const authStore = useAuthStore()

/* 分页 */
const dataTotal = ref(0)
const pageSize = ref(20)
const currentPage = ref(1)

if(route.currentRoute.value.query.currentPage) {
  currentPage.value = Number(route.currentRoute.value.query.currentPage)
}

/* 切换页码方法 */
const currentChange = (val) => {
  currentPage.value = val
  onSubmit()
}

/* 表格数据加载动画 */
const loading = ref(false)

/* 表格数据 */
const tableData = ref([])

const achievementFormFormatter = (row, column, cellValue) => {
  return cellValue ? cellValue == '1' ? '专著或论文' : '研究报告' : ''
}

const tableColumns = computed(() => {
  if(fillType.value == 0) {
    return [
      { field: "name", label: "项目名称", minWidth: "200" },
      { field: "achievementForm", label: "成果形式", minWidth: "200", formatter: achievementFormFormatter },
      { field: "projectLeader", label: "项目负责人", minWidth: "120" },
      { field: "unit", label: "负责人所在单位", minWidth: "150" },
      { field: "fillTime", label: "填表日期", minWidth: "120", formatter: dateFormatter },
      { field: "persons", label: "主要参加者", minWidth: "140" },
      { field: "checkStatus", label: "状态", minWidth: "120", formatter: checkStatusFormatter },
    ]
  } else if (fillType.value == 1 || fillType.value == 2) {
    return [
      { field: "factualMaterials", label: "事迹材料（文字）", minWidth: "200" },
      { field: "promotionSituation", label: "报刊宣传", minWidth: "120" },
      { field: "awards", label: "获奖情况", minWidth: "120" },
      { field: "picture", label: "图片", minWidth: "250", slot: "imgView" },
      { field: "video", label: "视频", minWidth: "250", slot: "videoView" },
    ]
  } else if (fillType.value == 3) {
    return [
      { field: "report", label: "宣讲报告（文字）", minWidth: "200" },
      { field: "briefing", label: "宣传情况简介（文字）", minWidth: "120" },
      { field: "promotionSituation", label: "报刊宣传", minWidth: "120" },
      { field: "picture", label: "图片", minWidth: "250", slot: "imgView" },
    ]
  } else {
    return [
      { field: "briefing", label: "视频创作传播相关情况说明", minWidth: "200" },
      { field: "microVideo", label: "微视频", minWidth: "250", slot: "videoView" },
      { field: "picture", label: "报道传播截图", minWidth: "250", slot: "imgView" },
    ]
  }
})

/* 点击搜索 */
const onSubmit = (type) => {
  loading.value = true
  let params = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    dfi: {
      Logic: 0,
      Filters: [{
        Field: "createuserid",
        Operator: 8,
        Value: authStore.userInfo.uid
      }],
    },
  }

  if(fillType.value != 0) {
    params.dfi.Filters.push({
      Field: "fillingType",
      Operator: 8,
      Value: fillType.value
    })
  }

  let api = fillType.value == 0 ? '/DeclarationM/GetSocialScienceFundInfoList' : '/PreachM/GetPreachFillingInfoList'

  http.$POST(api, params).then(res => {
    loading.value = false
    if (res.isError) return
    tableData.value = res.result.dataLst
    dataTotal.value = res.result.countAll
  }).catch(err => {
    loading.value = false
    ElMessage.warning("查询失败，请重试")
  })
}

watch(
  () => route.currentRoute.value.path,
  () => {
    onSubmit()
  },
)

/* 点击编辑 */
const fundEdit = (row) => {
  let editUrl = ""

  if (flowType.value == 0) editUrl = '/backend/learn-fund/add'
  // 宣讲集体
  if (flowType.value == 1) editUrl = '/backend/publicize-collectiveness/add'
  // 先进个人
  if (flowType.value == 2) editUrl = '/backend/publicize-personal/add'
  // 优秀理论宣讲报告
  if (flowType.value == 3) editUrl = '/backend/publicize-report/add'
  // 优秀理论宣讲微视频
  if (flowType.value == 4) editUrl = '/backend/publicize-video/add'

  route.push({
    path: editUrl,
    query: { id: row.id, type: 'edit' }
  })
}

/* 查看详情 */
const fundDetail = (row) => {
  let detailUrl;
  // 社科基金
  if (flowType.value == 0) detailUrl = '/backend/learn-fund/detail'
  // 宣讲集体
  if (flowType.value == 1) detailUrl = '/backend/publicize-collectiveness/detail'
  // 先进个人
  if (flowType.value == 2) detailUrl = '/backend/publicize-personal/detail'
  // 优秀理论宣讲报告
  if (flowType.value == 3) detailUrl = '/backend/publicize-report/detail'
  // 优秀理论宣讲微视频
  if (flowType.value == 4) detailUrl = '/backend/publicize-video/detail'

  let { href } = route.resolve({
    path: detailUrl,
    query: { id: row.id }
  })
  window.open(href, "_blank")
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
.filter-button{
  :deep(.el-form-item__content){
    justify-content: center;
  }
}
</style>